<template>
	<view class="app My-Equipment">
		<AppNavbar :bgColor="'transparent'" leftIconColor="black" title="Equipment" titlecolor="black" :fontWeight="600"
			righticon="more" @rightClick="navRight">
		</AppNavbar>
		<!-- 操作设备 -添加 -删除 -->
		<view class="My-Equipment-operate bor-radius-10" v-show="operateShow">
			<p class="f-size-16 font-weight-600 t-center p-1" @click="show = true">Add device</p>
			<up-line color="#ffff"></up-line>
			<p class="f-size-16 font-weight-600 t-center p-1" @click="delshow = true">Delete device</p>
		</view>
		<view class="My-Equipment-info p-3">
			<view class="My-Equipment-info-title">
				<p class="f-size-14 font-weight-600 mb-3">My pet</p>
				<up-line color="rgba(154,154,154,.5)"></up-line>
			</view>
			<view class="My-Equipment-info-content ">
				<!-- 设备信息 -->
				<view class="My-Equipment-info-content-item flex-between-center mt-2">
					<view class="My-Equipment-info-content-item-left">
						<image src="/static/icon/necklace-cyan.png" mode=""></image>
						<text class="ml-2">Milo</text>
					</view>
					<view class="py-5" v-if="delshow">
						<image src="/static/icon/del.png" mode="" style="width: 42rpx;height: 42rpx;"></image>
					</view>
					<view class="My-Equipment-info-content-item-right mb-2 f-size-12" v-else>
						<view class="t-end">
							<text style="color: black;" class="font-weight-600">100%</text>
							<image class="battery ml-2" src="/static/svg/fa5-battery-full-fas.svg" mode=""></image>
						</view>
						<view class="My-Equipment-info-content-Model my-2">
							Model 1.0
							<image src="/static/icon/goto-black-grey.png" mode=""></image>
						</view>
						<p>Current pet</p>
					</view>
					<up-line></up-line>
				</view>

				<view class="My-Equipment-info-content-item flex-between-center mt-2">
					<view class="My-Equipment-info-content-item-left">
						<image src="/static/icon/necklace-orange.png" mode=""></image>
						<text class="ml-2">Moly</text>
					</view>
					<view class="py-5" v-if="delshow">
						<image src="/static/icon/del.png" mode="" style="width: 42rpx;height: 42rpx;"></image>
					</view>
					<view class="My-Equipment-info-content-item-right mb-2 f-size-12" v-else>
						<view class="t-end">
							<text style="color: black;" class="font-weight-600">100%</text>
							<image class="battery ml-2" src="/static/svg/fa5-battery-full-fas.svg" mode=""></image>
						</view>
						<view class="My-Equipment-info-content-Model my-2">
							Model 1.0
							<image src="/static/icon/goto-black-grey.png" mode=""></image>
						</view>
						<p>Current pet</p>
					</view>
					<up-line></up-line>
				</view>
			</view>

		</view>
		<view class="My-Equipment-btn t-center">
			<image src="/static/image/purchase-btn@3x.png" mode=""></image>
		</view>

		<!-- 模态框组件 -->
		<necklacePopup v-model="show" title="Add failure" content="Adding a pet requires connecting a new device first"
			@confirm="show = false" @close="show = false">
			<template #note>
				<view class="t-center mt-2 f-size-12 font-weight-600">
					<text style="color: #757587;">No equipment?</text>
					<text style="color: #5f5edd;">click to buy</text>
				</view>
			</template>
		</necklacePopup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	let show = ref(false)
	let operateShow = ref(false)
	let delshow = ref(false)

	const navRight = () => {
		operateShow.value = !operateShow.value
		delshow.value = false
	}
</script>

<style lang="scss" scoped>
	.app {
		.My-Equipment-operate {
			background-color: rgba(0, 0, 0, 0.5);
			color: $uni-bg-color;
			position: fixed;
			right: 20rpx;
		}

		.My-Equipment-info {
			.My-Equipment-info-title {
				p {
					color: #9A9A9A;
				}
			}

			.My-Equipment-info-content-item {
				flex-wrap: wrap;

				image {
					vertical-align: middle;
				}

				.My-Equipment-info-content-item-left {
					image {
						width: 72rpx;
						height: 40rpx;
					}
				}

				.My-Equipment-info-content-item-right {
					color: #d0d0d0;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.My-Equipment-btn {
			margin-top: 250rpx;

			image {
				width: 684rpx;
				height: 186rpx;
			}
		}
	}
</style>